<template>
  <el-row>
    <el-col class="grid-content-up">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="题目题干">
          <el-input v-model="question.questionContent" placeholder="请输入题目题干"></el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="question.questionType"  placeholder="题目类型筛选">
            <el-option label="单选题" value="oneChoice"></el-option>
            <el-option label="多选题" value="moreChoice"></el-option>
            <el-option label="判断题" value="TF"></el-option>
            <el-option label="纯文字题" value="word"></el-option>
            <el-option label="带图带文字题" value="photoWord"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="question.status"  placeholder="状态筛选">
            <el-option label="全部" value="null"></el-option>
            <el-option label="停用" value="1"></el-option>
            <el-option label="未停用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="reset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
        <el-button type="success" :icon="Plus" @click="addDialog = true">
          新增
        </el-button>
        <el-button type="danger" :icon="Delete">
          删除
        </el-button>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      &nbsp;
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
      <div class="grid-content-down">
        <el-table :data="data" style="width: 100%"
                  height="330"
                  header-cell-style="background:#f8f8f9;color:#535a6c"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" sortable label="题目编号" width="120" />
          <el-table-column prop="userId" sortable label="上传者" width="120" >
            <template #default="scope">
              <UserNameById :id="scope.row.userId"></UserNameById>
            </template>
          </el-table-column>
          <el-table-column prop="questionContent" sortable label="题目题干" width="180" />
          <el-table-column prop="questionType" sortable label="题目类型" width="180" >
            <template #default="scope">
              <TypeTag :questionType="scope.row.questionType"/>
            </template>
          </el-table-column>
          <el-table-column prop="answer" sortable label="题目答案" width="180" />
          <el-table-column prop="score" sortable label="题目分数" width="120" />
          <el-table-column prop="level" sortable label="难易程度" width="150" >
            <template #default="scope">
              <LevelTag :level="scope.row.level"/>
            </template>
          </el-table-column>
          <el-table-column prop="majorId" sortable label="专业编号" width="120" />
          <el-table-column prop="status" sortable label="题目状态" width="150" >
            <template #default="scope">
              <StatusTag :status="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column prop="isObjective" sortable label="是否为客观题" width="150" >
            <template #default="scope">
              <ObjectTypeTag :isObjective="scope.row.isObjective"/>
            </template>
          </el-table-column>
          <el-table-column prop="remark" sortable label="备注" width="180" />
          <el-table-column fixed="right" prop="operate" label="操作" width="180" >
            <template #default="scope">
              <el-button-group>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑此问题"
                    placement="top"
                >
                  <el-button type="primary" :icon="Edit" size="small"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除此问题"
                    placement="top"
                >
                  <el-button :icon="Delete" type="danger" size="small" @click="fakeDelete(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="停用此问题"
                    placement="top"
                >
                  <el-button type="warning" size="small" :icon="Remove"></el-button>
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="addDialog" title="添加题目" width="500px" center>
    <AddQuestion></AddQuestion>
  </el-dialog>

</template>

<script setup>
import {Search,Refresh,Plus,Remove,Edit,Delete} from '@element-plus/icons-vue'
import AddQuestion from "@/view/question/AddQuestion";
import UserNameById from "@/components/user/UserNameById";
</script>
<script>
import StatusTag from "@/components/table/StatusTag";
import ObjectTypeTag from "@/view/question/ObjectTypeTag";
import {fakeDeleteQuestion, selectAllQuestion} from "@/api/question";
import TypeTag from "@/view/question/TypeTag";
import LevelTag from "@/view/question/LevelTag";
const {ElMessage} = require("element-plus");

export default {
  name: "QuestionPage",
  components:{StatusTag,TypeTag,ObjectTypeTag,LevelTag},
  data() {
    return {
      data:'',
      addDialog:false,
      question:{
        questionContent: '',
        questionType: '',
        status: '',
      }
    }
  },
  mounted() {
    this.getQuestion();
  },
  methods :{
    async getQuestion() {
      const t = await selectAllQuestion();
      this.data = t.data.data
    },
    async fakeDelete(id){
      const t = await fakeDeleteQuestion(id);
      if(t.data.code === 200){
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      }
    }
  },
  computed:{
    getData() {
      return this.data;
    }
  }
}
</script>

<style scoped>


</style>